<template>
  <div class="fillcontain">
    <search-item @showDialog="showAddFundDialog" @searchList="getMoneyList" @onBatchDelMoney="onBatchDelMoney" />
    <div class="table_container">
      <el-table
        v-loading="loading"
        :data="users"
        style="width: 1300px"
        align="center"
        @select="selectTable"
        @select-all="selectAll"
      >
        <el-table-column
          v-if="idFlag"
          prop="id"
          label="id"
          align="center"
          width="180"
        />
        <el-table-column
          type="selection"
          align="center"
          width="30"
        />
        <el-table-column
          prop="username"
          label="账号"
          width="80"
        >
          <template slot-scope="scope">
            <span style="color:#00d053">{{ scope.row.adminName }}</span>
          </template>
        </el-table-column>

        <!-- <el-table-column
                    v-if="idFlag"
                    prop="address"
                    label="籍贯"
                    align='center'
                    >
                </el-table-column> -->
        <!-- <el-table-column
                prop="address"
                label="籍贯"
                align='center'
                >
                 <template slot-scope="scope">
                    <span style="color:#00d053">+ {{ scope.row.tableAddress || scope.row.address }}</span>
                </template>
            </el-table-column> -->
        <!-- <el-table-column
                prop="createTime"
                label="投资时间"
                align='center'
                sortable
                width="170">
                <template slot-scope="scope">
                    <el-icon name="time"></el-icon>
                    <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
                </template>
            </el-table-column> -->
        <!-- <el-table-column
                prop="incomePayType"
                label="收支类型"
                align='center'
                width="130"
                :formatter="formatterType"
                :filters="fields.incomePayType.filter.list"
                :filter-method="filterType">
            </el-table-column> -->
        <el-table-column
          prop="password"
          label="密码"
          align="center"
          width="120"
          sortable
        >
          <template slot-scope="scope">
            <span style="color:#00d053">{{ scope.row.adminPassword }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="phone"
          label="手机号"
          align="center"
          width="120"
          sortable
        >
          <template slot-scope="scope">
            <span style="color:#00d053">{{ scope.row.phone }}</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="email"
          label="邮箱"
          align="center"
          width="100"
          sortable
        >
          <template slot-scope="scope">
            <span style="color:#4db3ff">{{ scope.row.Email }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          align="center"
          width="100"
          sortable
        >
          <template slot-scope="scope">
            <span style="color:#4db3ff">{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="role"
          label="角色"
          align="center"
          width="130"
          sortable
        >
          <template slot-scope="scope">
            <span style="color:#f56767">{{ scope.row.role }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="condition"
          label="状态"
          align="center"
          width="80"
          sortable
        >
          <template slot-scope="scope">
            <span style="color:#4db3ff">{{ scope.row.state }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="remarks"
          label="备注"
          align="center"
          width="80"
          sortable
        >
          <template slot-scope="scope">
            <span style="color:#4db3ff">{{ scope.row.remarks }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="operation"
          align="center"
          label="操作"
          width="300"
        >
          <template slot-scope="scope">
            <el-button
              type="warning"
              icon="edit"
              size="mini"
              @click="onEditMoney(scope.row)"
            >编辑</el-button>
            <el-button
              type="danger"
              icon="delete"
              size="mini"
              @click="onDeleteMoney(scope.row,scope.$index)"
            >删除</el-button>
            <!-- <el-button
                        type="danger"
                        icon='delete'
                        size="mini"
                        @click='onEditMoney(scope.row)'
                    >修改状态</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <pagination :page-total="pageTotal" @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange" />
      <addFundDialog v-if="addFundDialog.show" :is-show="addFundDialog.show" :dialog-row="addFundDialog.dialogRow" @getFundList="getMoneyList" @closeDialog="hideAddFundDialog" />
    </div>
  </div>
</template>

<script>
import { mapGetters, mapState, mapMutations, mapActions } from 'vuex'
import * as mutils from '@/utils/mUtils'
import SearchItem from '../fundList/components/searchUserControl'
import AddFundDialog from '../fundList/components/addUserControl'
import Pagination from '@/components/pagination'
import { getMoneyIncomePay, removeMoney, batchremoveMoney } from '@/api/money'
import { getUserControls, updataUserControls, deleUserControls } from '@/api/usersControl'
// import { mapState, mapMutations, mapActions } from "vuex"; //结构vuex中的自带map方法

export default {
  components: {
    SearchItem,
    AddFundDialog,
    Pagination
  },
  data() {
    return {
      tableData: [],
      users: [],
      tableHeight: 0,
      loading: true,
      idFlag: false,
      isShow: false, // 是否显示资金modal,默认为false
      editid: '',
      rowIds: [],
      sortnum: 0,
      format_type_list: {
        0: '提现',
        1: '提现手续费',
        2: '提现锁定',
        3: '理财服务退出',
        4: '购买宜定盈',
        5: '充值',
        6: '优惠券',
        7: '充值礼券',
        8: '转账'
      },
      addFundDialog: {
        show: false,
        dialogRow: {}
      },
      incomePayData: {
        page: 1,
        limit: 20,
        name: ''
      },
      pageTotal: 0
    }
  },
  computed: {
    ...mapGetters(['search'])
    // ...mapState(["users"]),

  },
  // created() {
  // 生命周期方法  当初始化项目则调用渲染方法
  //    this.setUsers();
  //    console.log("vuex")
  // },
      	mounted() {
    this.getMoneyList()
	   },
  methods: {
    // ...mapActions(["setUsers"]),
    setAddress(value) {

    },
    setTableHeight() {
      this.$nextTick(() => {
        this.tableHeight = document.body.clientHeight - 300
      })
    },
    // 获取资金列表数据
    getMoneyList() {
      const para = Object.assign({}, this.incomePayData, this.search)
      // console.log(para,'1212')
      getMoneyIncomePay(para).then(res => {
        this.loading = false
        this.pageTotal = res.data.total
        this.tableData = res.data.moneyList
      }),

      getUserControls(para).then(res => {
        this.loading = false
        //  this.pageTotal = res.data.total
        this.users = res
      })
    },
    // 显示资金弹框
    showAddFundDialog(val) {
      this.$store.commit('SET_DIALOG_TITLE', val)
      this.addFundDialog.show = true
    },
    hideAddFundDialog() {
      this.addFundDialog.show = false
    },
    // 上下分页
    handleCurrentChange(val) {
      this.incomePayData.page = val
      this.getMoneyList()
    },
    // 每页显示多少条
    handleSizeChange(val) {
      this.incomePayData.limit = val
      this.getMoneyList()
    },
    getPay(val) {
      if (mutils.isInteger(val)) {
        return -val
      } else {
        return val
      }
    },
    /**
            * 格式化状态
            */
    formatterType(item) {
      const type = parseInt(item.incomePayType)
      return this.format_type_list[type]
    },
    filterType(value, item) {
      const type = parseInt(item.incomePayType)
      return this.format_type_list[value] == this.format_type_list[type]
    },
    // 编辑操作方法
    onEditMoney(row) {
      this.addFundDialog.dialogRow = { ...row }
      console.log(this.addFundDialog.dialogRow, '1366669')
      this.showAddFundDialog()
      // const para = { _id: row._id }
      // console.log(para,"8989")
      // updataUserControls(para)
    },
    // 删除数据
    onDeleteMoney(row) {
      this.$confirm('确认删除该记录吗?', '提示', {
        type: 'warning'
      })
        .then(() => {
          const para = { _id: row._id }
          // console.log(para,"ID")
          deleUserControls(para).then(res => {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.getMoneyList()
          })
        })
        .catch(() => {})
    },
    onBatchDelMoney() {
      this.$confirm('确认批量删除记录吗?', '提示', {
        type: 'warning'
      })
        .then(() => {
          const ids = this.rowIds.map(item => item.id).toString()
          const para = { ids: ids }
          batchremoveMoney(para).then(res => {
            this.$message({
              message: '批量删除成功',
              type: 'success'
            })
            this.getMoneyList()
          })
        })
        .catch(() => {})
    },
    // 当用户手动勾选数据行的 Checkbox 时触发的事件
    selectTable(val, row) {
      this.setSearchBtn(val)
    },
    // 用户全选checkbox时触发该事件
    selectAll(val) {
      val.forEach((item) => {
        this.rowIds.push(item.id)
      })
      this.setSearchBtn(val)
    },
    setSearchBtn(val) {
      let isFlag = true
      if (val.length > 0) {
        isFlag = false
      } else {
        isFlag = true
      }
      this.$store.commit('SET_SEARCHBTN_DISABLED', isFlag)
    }
  }
}
</script>

<style lang="less" scoped>
    .table_container{
        padding: 10px;
        background: #fff;
        border-radius: 2px;
    }
    .el-dialog--small{
       width: 600px !important;
    }
    .pagination{
        text-align: left;
        margin-top: 10px;
    }

</style>

